<script setup lang="ts">
import { ElRow, ElCol, ElInput, ElButton, ElMessage, ElSlider } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const scriptUrl = defineModel("scriptUrl");
const demoFileUrl = defineModel("demoFileUrl");
const demoConfigType = defineModel("demoConfigType");
const demoConfigMode = defineModel("demoConfigMode");
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "SetPassword2",
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const url = ref("http://47.94.91.67/demo_file/demo.docx");
const containerRef = ref();
const cmRef = ref<CmComponentRef>();



let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref("");
onMounted(() => {
  containerWidth = containerRef.value.parentNode.offsetWidth;
  containerHeight = containerRef.value.parentNode.offsetHeight;
  if (containerHeight > 800) {
    containerHeight = 800;
  }
  containerRef.value.style.height = containerHeight + "px";
  setTimeout(() => {
    cmRef.value?.resize("100%", containerHeight);
  }, 1000);
  documentEditorKey.value = getUuid();
});

onUnmounted(() => {
  
});


watch(demoFileUrl, async (newsDemoFileUrl, oldDemoFileUrl) => {});

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  currentConnector = DocEditor.instances.docEditor.createConnector();
    window.connector = currentConnector;
    code.value += "\n\nonDocumentReady\n";
    
  setTimeout(() => {
    
  }, 1000);
};

var config = ref({
  type: "desktop",
  // "type": "mobile",
  documentType: "word",
  historyList: {
    history: [],
    currentVersion: "1",
  },
  document: {
    title: "通用模板.docx",
    // url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
    url: "",
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: "docx",
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: true,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: "theme-light",
    },
    mode: "edit",
    callbackUrl:
      "https://api.docs.onlyoffice.com/dummyCallback",
    lang: "zh-CN",
    user: {
      name: "曹瑞剑雄",
      id: "104",
    },
  },
});

const init = function () {
  
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.document.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
};
init();

let formData = ref({
  'password': 'password'
});

let jiami = function(){
    Asc.scope.password = formData.value.password;
    currentConnector.callCommand(
    function () {
      Api.SetPassword2('lock', Asc.scope.password);
    },
    function () {});
};

let jiemi = function(){
    Asc.scope.password = formData.value.password;
    currentConnector.callCommand(
    function () {
      Api.SetPassword2('unlock', Asc.scope.password);
    },
    function () {});
};


</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="9">
        <div style="width: 100%; height: 100%;overflow: scroll;background: #ffffff;">
            <el-row style="margin-top: 15px;margin-bottom: 15px;">
                <el-col :span="12">
                    <el-input
                      v-model="formData.password"
                      placeholder="请输入密码"
                      style="width: 240px"
                    >
                    <template #prepend>密码</template>
                  </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="jiami" >加密</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="jiemi" >解密</el-button>
                </el-col>
            </el-row>
        </div>
        
      </el-col>
      <el-col :span="15">

        <DocumentEditor
          v-if="demoFileUrl && config.document.url"
          id="docEditor"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="config"
          :events_onDocumentReady="onDocumentReady"
          height="700px"
        />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}
</style>
